<template>
    <div id='httpbox'>
        <div id="httpword">请输入合法网址</div>
              <div id="httminword">本码为静态码，不可修改，不能统计数量</div>
    <input id="httpinput" type="text" placeholder="&nbsp;&nbsp;&nbsp;http://">
      <div id="detail" @click="sendmes" v-show="active">验证不准确？点击直接提交</div>
      <!-- <div id="detail" @click="sendmes">验证不准确？点击直接提交</div> -->
        <el-button type="primary" id="scbutton" @click="check">&nbsp;&nbsp;&nbsp;生成二维码&nbsp;&nbsp;&nbsp;</el-button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Httpboxv',
data(){
  return{
    qrtxt:'',
    active:false,
    item:{
      name:'',
      img:'',
      time:'',
    }
}
},
 mounted:function(){
    document.addEventListener('keydown', (e) => {
	let key = window.event.keyCode;
    if (key == 13) {
        console.log("121321312");
       this.check();
	}
})
},
methods:{
  sendmes(){
 this.qrtxt=document.getElementById('httpinput').value;
  console.log("send")
  let that=this;
 axios({
    headers:{'Content-Type': "application/json;charset=UTF-8"},
     responseType: 'arraybuffer',
    //  headers:{'Content-Type': "multipart/form-data"},
    url:'http://6rm52f.natappfree.cc/CreateQR/SimpleQR',
    method:'post',
    data:{
         size:this.$store.state.size,
        content:this.qrtxt+'',
    }
}).then(res=>{
 res= 'data:image/png;base64,' + btoa(
          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )

    console.log(res);
      let mu = res;
      that.$store.commit('geturl',mu);
      let data={};
          let txt=document.getElementById('httpinput').value;
        txt=txt.length<30?txt:txt.slice(0,30)+'...'
        data.name=txt;
        data.img= mu;
        data.time=this.gettime();
        that.$store.state.history.push(data);
             window.localStorage.setItem("history", that.$store.state.history);
              that.$router.push({path:'/Sucbox',query:{id:that.qrtxt,src:1}})
      })
    .catch(err=>{
      console.log(err)
        that.$message.error({
          message: '宝啊，好像有些错误了呢'})
      });

     },
check(){
 this.qrtxt=document.getElementById('httpinput').value;
  document.getElementById("httpinput").style.border='none'
  if(this.qrtxt==''){
     document.getElementById("httpinput").style.border=' dashed 1.5px red'
      this.$message({
          message: '小可爱，输入不能为空哦',
          type: 'warning'
        });
  }
  else{
let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
        if(reg.test(this.qrtxt)){
    this.active=false;
    this.sendmes(); 
}
else{   
   console.log(this.qrtxt)
  console.log(reg.test(this.qrtxt))
  this.active=true;
        this.$message({
          message: '宝啊，你输入的网址好像不太规范呢',
          type: 'warning'
        });
}
 
    // this.sendmes();       
  }

},
gettime(){
let d = new Date();

let hour= d.getHours();//得到小时数

let min= d.getMinutes();//得到分钟数

if(hour<10){
  hour='0'+hour+'';
}
if(min<10){
  min='0'+min+'';
}
return hour+':'+min+'';
}

}

}
</script>

<style scoped>
#detail{
    position: relative;
left: -10px;
  font-size: 13px;
  margin: 20px;
  color: #3785ED;
  cursor: default;
}
#detail:hover{
  opacity: 0.8;
}
#scbutton{
    position: absolute;
    top:210px;
    left:310px

}
#httpinput{
    
    width: 690px;
    height: 50px;
    outline: none;
    font-size:20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border: none;
}
#httpbox{
    position: absolute;
    top:170px;
    left:290px;
}
#httpword{
    color:#3785ED;
    margin-bottom: 20px;
}
#httminword{
    color:black;
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 40px;
}
</style>